<template>
  <div>
    <!-- 顶部 -->
    <mt-header title="个人中心" style="background-color: rgb(248, 62, 62)">
      <mt-button @click="showPopup" slot="right">退出</mt-button>
      <!--  -->
    </mt-header>
    <van-popup
      v-model="show"
      position="bottom"
      round
      :style="{ width: '100%', height: '20%' }"
    >
      <div class="set">
        <div class="logoff">
          <button @click="LogOff">退出登录</button>
        </div>
        <div class="into"></div>
        <div class="cancel">
          <button @click="Cancel">取消</button>
        </div>
      </div>
    </van-popup>
    <!-- 个人中心 -->
    <div class="toux1">
      <van-image
        round
        width="5rem"
        height="5rem"
        :src="touxiang"
        @click="metx"
      />
    </div>
    <van-grid>
      <van-grid-item
        icon="/Img/订单.png"
        text="全部订单"
        to="/src/views/Cart.vue"
      />
      <van-grid-item
        icon="/Img/dfh.png"
        text="待发货"
        to="/src/views/Cart.vue"
      />
      <van-grid-item
        icon="/Img/yunshu.png"
        text="待收货"
        to="/src/views/Cart.vue"
      />
      <van-grid-item
        icon="/Img/qs.png"
        text="已签收"
        to="/src/views/Cart.vue"
      />
    </van-grid>
    <van-cell-group>
      <van-cell icon="chat-o" title="消息通知" value="" url="#" is-link />
      <van-cell icon="location-o" title="地址信息" value="" url="#" is-link />
      <van-cell icon="star-o" title="我的收藏" value="" url="#" is-link />
      <van-cell icon="clock-o" title="历史记录" value="" url="#" is-link />
    </van-cell-group>
    <!-- 底部Tabbar -->
    <mt-tabbar
      v-model="tabbars"
      fixed
      style="color: #bfbfbf; border-top: 1px solid #bfbfbf"
    >
      <mt-tab-item id="首页" style="background-color: #fff">
        <img slot="icon" src="../assets/首页.svg" />
        <strong>首页</strong>
      </mt-tab-item>
      <mt-tab-item id="周边" style="background-color: #fff">
        <img slot="icon" src="../assets/商城.svg" />
        <strong>周边</strong>
      </mt-tab-item>
      <mt-tab-item id="购物车" style="background-color: #fff">
        <img slot="icon" src="../assets/购物车.svg" />
        <strong>购物车</strong>
      </mt-tab-item>
      <mt-tab-item id="我的" style="background-color: #fff">
        <img slot="icon" src="../assets/我的(1).svg" />
        <strong style="color: rgb(248, 62, 62)">我的</strong>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      tabbars: "我的",
      touxiang: "https://img01.yzcdn.cn/vant/cat.jpeg",
      show: false,
    };
  },
  methods: {
    metx() {
      console.log("更换头像");
    },
    showPopup() {
      if(window.sessionStorage.getItem('id')==null){
        this.$toast({
          message:'请先登录~',
          duration:1000
        })
      }else{
      this.show = true;
      }
    },
    //设置 退出登录按钮
    LogOff() {
      this.$dialog
      .confirm({
        title: "退出登录",
        message: "是否退出当前账号",
      })
      .then(() => {
        // on confirm
        this.$store.dispatch("logoff");
        window.sessionStorage.clear();
        window.localStorage.clear();
        this.$router.push("/");
      })
      .catch(() => {
        // on cancel
      });
    },
    //设置 取消按钮
    black(){
      this.show = false;
    },
    Cancel() {
      this.show = false;
    },
  },
  watch: {
    tabbars() {
      if (this.tabbars == "周边") {
        this.$router.push("/product");
      } else if (this.tabbars == "首页") {
        this.$router.push("/");
      } else if (this.tabbars == "购物车") {
        this.$router.push("/cart");
      }
    },
  },
  mounted() {
  },
  computed: {},
};
</script>
<style scoped>
#footer {
  margin: 10pt auto;
}
.van-card {
  padding: 39px 15px;
  margin: 2pt;
}
.toux1 {
  /* background-image: url("/Img/bj.jpg"); */
  background-color: rgb(219, 214, 214);
  padding: 10pt;
}
.van-card__price {
  display: inline-block;
  margin: auto;
}
/* 图片 */
.van-grid-item__content {
  padding: 4px 7px;
  background-color: #fff;
}
.set {
  height: 100%;
  position: relative;
}
.logoff button{
  width: 98%;
  height: 3rem;
  border: 0px;
  border-radius: 3rem;
  margin: auto;
  position: absolute;
  bottom:70px;
  left: 3px;
  background-color: rgb(248, 62, 62);
  color: white;
}
/* .into{
  width: 100%;
  height: 10px;
  background-color: rgb(218, 218, 218);
  position: absolute;
  bottom: 3.05rem;
  left: 0px;
} */
.cancel button{
  width: 100%;
  height: 3rem;
  border:0px;
  border-radius: 3rem;
  position: absolute;
  bottom: 10px;
  left: 0px;
  color:white;
   background-color: rgb(209, 207, 207);
}
</style>